@CHARSET "UTF-8";
/* 
 *  全局样式
 *  ---------------------------------------
 *  作者: haibao(http://smwell.sinaapp.com/)
 *  时间: 2015-1-6
 *  企鹅：964279742
 *  创意源于生活，代码如诗从你我开始
 *  OOCSS虽好，需培养，需规范，需慢慢品尝
 */


/*slider*/
#slider-box{position:relative;width:90%;overflow:hidden; margin: 0 auto; padding-bottom: 20px;}
#slider {height:100%;overflow:hidden;*zoom:1;-webkit-backface-visibility: hidden;-webkit-transform-style: preserve-3d;}
#slider li{width:100%;height:100%;float:left;display:none;}
#slider li.active{display:block;-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;}
#slider li img{ display: block;}
#slider li img.title{
  margin: 10px auto 30px;
}
.arrow_left{
  position: absolute;
  left: 2%;
  bottom: 50%;
}
.arrow_right{
  position: absolute;
  right: 2%;
  bottom: 50%;  
}
#arrow {position:absolute;bottom:10px;right:10px;}
#arrow li{width:12px;height:12px;float:left;display:inline-block;margin: 0 3px;background-color: #d5dbd6;border-radius: 50%;-webkit-border-radius: 50%;}
#arrow li.active{background-color:#c95122;}

@-webkit-keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    opacity: 0;
  }

  60% {
    -webkit-transform: translateX(-20%);
    transform: translateX(-20%));
    opacity: 1;
  }

  80% {
    -webkit-transform: translateX(0%;
    transform: translateX(0%);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    opacity: 1;
  }
}

@keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    opacity: 0;
  }

  60% {
    -webkit-transform: translateX(-20%);
    -ms-transform: translateX(-20%);
    transform: translateX(-20%);
    opacity: 1;
  }

  80% {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
    opacity: 1;
  }
}
